import React from 'react'
import {withRouter} from 'react-router';
import {Route, BrowserRouter, Link} from 'react-router-dom'

const Index = ()=> {
    return <div>Index</div>
}

class RenderComponent extends React.Component {

    render() {
        return <div>
            I'm the subclass of React.Component.
        </div>
    }
}

const About = ()=> {
    return <div>About</div>
}

const Topic_ = ({match}) => {
    // match : {path: "/topics/:topicId", url: "/topics/rendering", isExact: true, params: {topicId:"rendering"}}
    return <div>
        topicId: {match.params.topicId}
    </div>
}

class Topic extends React.Component {

    componentWillReceiveProps(nextProps) {
        console.log(nextProps);
        // nextProps 为下一个即将显示的页面的属性;
        // 有3个属性 match, history, location,
    }

    render() {
        // this.props.match : {path: "/topics/:topicId", url: "/topics/rendering", isExact: true, params: {topicId:"rendering"}}
        return (<div>
            <h3>{this.props.match.params.topicId}</h3>
        </div>)
    }
}

const Topics = ({match, history, location}) => {
    return (
        <div>
            <h3>Topics</h3>
            <ul>
                <li><Link to={`${match.url}/rendering`}>Rendering?</Link></li>
                <li><Link to={`${match.url}/components`}>Components?</Link></li>
                <a onClick={()=> { history.push(`${match.url}/rendering`); }}>PushTo ReactRendering</a>
            </ul>
            <Route path={`${match.url}/:topicId`} component={Topic}></Route>
            <Route exact path={match.url} render={() => (<h3>No Topic Selected!</h3>)}/>
        </div>
    );
}

const BasicApp = ()=> {
    return <BrowserRouter basename="course01">
        <div>
            <ul>
                <li><Link to="/">Index</Link></li>
                <li><Link to="/topics">Topics</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/topics" component={Topics}></Route>
            <Route path="/about" component={About}></Route>
        </div>
    </BrowserRouter>
}
export default BasicApp

// 定义组件还可以使用 Route 的 render 属性; render 可以直接返回 html 片段,也可以是 Component 组件;
// componentWillReceiveProps 在组件将接收到新的属性的时候被触发, 比如 Topic 组件将从 /rendering 转到 /components;
